import React from 'react';
import { connect } from 'dva';
// import 'bootstrap/dist/css/bootstrap.min.css';

class MessagePage extends React.Component {
    render() {
        // console.log(this.props);
        let list = this.props.message.list;
        return (
            <div className="container alert">
                <h1>留言板</h1>
                <hr />
                <form action="">
                    <div className="form-group">
                        <input ref={(input) => { this.author = input }} type="text" className="form-control" placeholder="留言人" />
                    </div>
                    <div className="form-group">
                        <textarea ref={(input) => { this.content = input }} rows="3" className="form-control" placeholder="留言内容"></textarea>
                    </div>
                    <div className="form-group">
                        <button onClick={() => { this.addHandle() }} type="button" className="btn btn-primary">提交留言</button>
                    </div>
                </form>
                <hr />
                <ul className="list-group">
                    {list.map(item => {
                        return <li className="list-group-item" key={item.id}>
                            <p>
                                {item.content}
                            </p>
                            <p className="clearfix">

                                <span>
                                    {item.date}
                                </span>
                                <button className="pull-right btn btn-danger btn-xs" onClick={() => { this.del(item.id) }}>删除</button>

                            </p>
                        </li>
                    })}
                </ul>
            </div>
        );
    }

    // 删除
    del(id) {
        // console.log('删除'+id);
        this.props.dispatch({ type: 'message/del', data: id });
    }


    addHandle() {
        const content = this.content.value.trim();
        const author = this.author.value.trim();
        if (content === '' || author === '') {
            return alert('请填写完整的留言内容!');
        }
        console.log(content, author);
        const data = { content, author }
        this.props.dispatch({ type: 'message/add', data });
    }

    UNSAFE_componentWillMount() {
        // console.log('组件即将挂载');
        this.props.dispatch({ type: 'message/getListAsync' });
    }
}

MessagePage.propTypes = {

}
const mapStateToProps = (state) => {
    // state.namespace 表示当前model中的所有数据集合
    return { message: state.message }
}

export default connect(mapStateToProps)(MessagePage);